<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="background:white;padding-top:20px">
      <el-form-item label="日期" prop="route_name">
        <el-date-picker v-model="form.busDate" value-format="yyyy-MM-dd" type="date" filterable placeholder="选择日期"> </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="开始日期" prop="route_name">
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"> </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="route_name">
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"> </el-date-picker>
      </el-form-item> -->
      <el-checkbox v-model="form.isOnlySelf">只看自己</el-checkbox>

      <nm-button type="primary" @click="querybooksheetList" text="查 询" style="margin-left:20px"></nm-button>
      <!-- <nm-button type="primary" @click="canclebooksheetFun" text="作 废" style="margin-left:20px"></nm-button>
      <nm-button type="primary" @click="inquire" text="重 打" style="margin-left:20px"></nm-button>
      <nm-button type="primary" @click="inquire" text="换 车" style="margin-left:20px"></nm-button> -->
    </el-form>

    <el-table ref="topictable" :max-height="tabheight" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
      <!-- <el-table-column label="#" type="index" width="50"> </el-table-column> -->
      <el-table-column prop="bus_date" label="日期"> </el-table-column>
      <el-table-column prop="sheet_id" label="单据号"> </el-table-column>
      <el-table-column prop="company" label="承运公司"> </el-table-column>
      <el-table-column prop="bus_id" label="班次"> </el-table-column>
      <el-table-column prop="bus_start_time" label="发车时间"> </el-table-column>
      <el-table-column prop="endStopName" label="终点站"> </el-table-column>
      <el-table-column prop="licensePlateNo" label="车辆号"> </el-table-column>
      <el-table-column prop="sold_seat" label="售票数"> </el-table-column>
      <el-table-column prop="soldMoney" label="售票款"> </el-table-column>
      <el-table-column prop="check_quantity" label="检票人数"> </el-table-column>
      <el-table-column prop="checkMoney" label="检票款"> </el-table-column>
      <el-table-column prop="remainMoney" label="结算款"> </el-table-column>
      <el-table-column prop="lineCode" label="打印数"> </el-table-column>
      <el-table-column label="操作" width="160px">
        <template slot-scope="scope">
          <el-button style="color:red" type="text" @click="canclebooksheetFun(scope.row)">作废</el-button>
          <el-button type="text" @click="booksheetprintagainFun(scope.row)">重打</el-button>
          <el-button type="text" @click="toChange(scope.row)">换车</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background @current-change="paginationChange" layout="prev, pager, next" :total="getListTotal" />
    <el-dialog title="操作" :visible.sync="dialogVisible" :before-close="clearModel" width="30%">
      <div id="principalDiv">
        <span>选择车次：</span>
        <el-select style="width:200px" v-model="form.vehicleId" filterable placeholder="请选择">
          <el-option v-for="item in vehicleOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearModel">取 消</el-button>
        <el-button type="primary" @click="toChangeSend">确 定</el-button>
      </span>
    </el-dialog>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
// import SavePage from '../components/save'
// import detailList from '../components/detailList'
import { getDateFun } from '../../utils/js/common'

const api = $api.dispatch.route_Info
const busApi = $api.dispatch.env_bus_Info

export default {
  name: page.name,
  mixins: [mixins.list],
  // components: { SavePage, detailList },
  data() {
    return {
      getListTotal: 1,
      vehicleOption: [],
      dialogVisible: false,
      value1: '',
      form: {
        isOnlySelf: false,
        busDate: getDateFun(),
        busNo: '',
        sheetId: '',
        vehicleId: '',
        PageNum: 1,
        PageSize: 10,
      },
      toChangeData: {},
      getList: [],
      today: '',
      time: '',
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 线路名称 */
          route_name: '',
        },
      },
      removeAction: api.remove,
      buttons: page.buttons,
      tabheight: 400,
    }
  },
  mounted() {
    this.querybooksheetList()
    this.vehicleList()
    this.$nextTick(() => {
      this.tabheight = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.getTime()
  },
  methods: {
    vehicleList() {
      busApi.vehicleQuery().then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.license_no }
        })
        this.vehicleOption = arr
      })
    },
    paginationChange(val) {
      this.form.PageNum = val
      this.querybooksheetList()
    },
    toChange(row) {
      this.dialogVisible = true
      this.toChangeData = row
    },
    clearModel() {
      this.dialogVisible = false
      this.form.vehicleId = ''
    },
    toChangeSend() {
      var data = {
        busDate: this.form.busDate,
        busNo: this.toChangeData.bus_id,
        sheetId: this.toChangeData.sheet_id,
        guid: this.form.vehicleId,
      }
      api.booksheettochangecar(data).then((res) => {
        this.$message.success('操作成功')
        this.querybooksheetList()
      })
      this.clearModel()
    },
    // 结算单列表
    querybooksheetList() {
      api.querybooksheet(this.form).then((res) => {
        this.getList = res.bs
        this.getListTotal = res.totalItems
      })
    },
    // 作废结算单
    canclebooksheetFun(row) {
      var data = {
        busDate: this.form.busDate,
        busNo: row.bus_id,
        sheetId: row.sheet_id,
      }
      api.canclebooksheet(data).then((res) => {
        this.querybooksheetList()
        this.$message.success('操作成功')
      })
    },
    // 重打结算单
    booksheetprintagainFun(row) {
      var data = {
        busDate: this.form.busDate,
        busNo: row.bus_id,
        sheetId: row.sheet_id,
      }
      api.booksheetprintagain(data).then((res) => {
        this.querybooksheetList()
        this.$message.success('操作成功')
      })
    },
    // 获取当天日期
    getTime() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.form.busDate = y + '-' + '0' + m + '-' + d
      this.today = y + '年' + m + '月' + d + '日'
      this.time = hh + ':' + mf + ':' + ss
    },
    inquire() {},
  },
}
</script>
<style scoped>
.box {
  display: flex;
  margin: 30px;
}
.time {
  margin-left: 10px;
}
.principal {
  margin-left: 30px;
}
#principalDiv {
  text-align: center;
}
</style>
